<%--
  Created by IntelliJ IDEA.
  User: jaovo
  Date: 2021/4/14
  Time: 14:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>用户展示</title>
    <%@include file="/capital .jsp"%>
</head>
<body>
<div id="layout">
    <Layout>
        <i-Header><h3 style="color: white">超市后台管理系统</h3></i-Header>
        <i-Content>
            <a href="/user/age"><button style="background-color: blanchedalmond;width: 70px;height: 29px">添加信息</button></a>
            <i-table :columns="columns1" :data="data1" stripe border height="500"></i-table>
        </i-Content>
    </Layout>
</div>

<script>
    new Vue({
        el:"#layout",
        data:{
            columns1:[
                {title:"序号",key:"id"},
                {title:"名字",key:"name"},
                {title:"手机号",key:"password"},
                {title:"邮箱",key:"email"},
                {title:"地址",key:"ose"},
                {title:"操作", align: "center",
                    render: (h, params) => { //params是你选中行的数据
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    to:'user/upse?id='+params.row.id
                                },
                                style: {
                                    marginRight: '5px'
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small',
                                     to:'user/dele?id='+params.row.id
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            data1:[]
        },
       /*箭头函数*/
       mounted() {
           axios.get("user/userList").then(
               ({data})=>{
                   console.log(data);
                   this.data1=data;
               }
           )
       }
    })
</script>
</body>
</html>
